<template>
    <div class="set-config">
       
        <div class="table-box">
            <n-button @click="onBtn">信息</n-button>
            <BaseTable ref="baseTableRef" :data="tableData" :columns="columns" :config="config"></BaseTable>
            
        </div>
        <div class="config-box">
            <baseConfig v-model:columns="columns" v-model:col="curCol"></baseConfig>
        </div>
    </div>
   
  </template>
<script lang="ts" setup>
import BaseTable from '@/components/BaseTable/index.vue'
import baseConfig from "./baseConfig.vue"
import { NDropdown,NTooltip  } from "naive-ui"
import { h, ref } from 'vue'


const getCol = ()=>{
    return {
        tpmTitle:'名称',
        title(col){
            return renderDrawDown(col)
        },
        key:"name"
    }
}
const handleSelect = (key: String,col) => {
    let index = columns.value.findIndex(item=>item.key==col.key)
    if(key === 'add' || key === 'copy'){
        let tpmCol = getCol()
        if(key === 'copy'){
            tpmCol = col
        }
        columns.value.splice(index+1,0,{
            ...tpmCol,
            tpmTitle:tpmCol.tpmTitle+(index+1)
        })
    }
    if(key === 'delete'){
        columns.value.splice(index,1)
    }
}

const colClick = (col) => {
    let index = columns.value.findIndex(item=>item.key==col.key)
    curCol.value =  columns.value[index]
}
function renderDrawDown(col) {
    return h(NDropdown , {
        options: options,
        onSelect: (key)=>{
            return handleSelect(key,col)
        },
        trigger:'hover'
    },{
    default: () => h('div',{
        onClick:()=>{
            return colClick(col)
        }
    },col.tpmTitle)})
}

const options = [
  { label: '新增列', key: 'add' },
  { label: '删除列', key: 'delete' },
  { label: '复制列', key: 'copy' },
]

const  config = ref({

})
const tableData = ref([{name:'3434',name1:'name1'}])
const columns = ref([{
    tpmTitle:'名称',
    title(col){
        return renderDrawDown(col)
    },
    key:"name"},{
    tpmTitle:'名称2',
    title(col){
        return renderDrawDown(col)
    },
    key:"name1"},
])

const curCol = ref(columns.value[0])

const onBtn = ()=>{
    console.log(columns.value[0].title.toString())
    let tpmAllArr  = []
    Array.from(columns.value).map((item)=>{ 
       
        let tpmObj = {}
        for(let key in item){
            if(item[key] instanceof Function){
                
                if(key === 'title'){
                    tpmObj[key] =item['title'].toString()
                }
            }else if(key === 'tpmTitle'){
                continue
            } else{
                tpmObj[key] =item[key]
            }
        }
        tpmAllArr.push(tpmObj)
        return item
    }) 
    
    console.log(JSON.stringify(tpmAllArr) )
    console.log(eval(JSON.stringify(tpmAllArr) )  )
}


</script>
<style>
.set-config{
    display: flex;
    background: #fff;
    padding: 20px;
    
}
.table-box{
    flex:1;
}
.config-box{
    width: 360px;
    margin-left: 20px;
    border:1px solid #eee;
}
</style>